<template>
  <div id="example-2">
  <button @click="show = !show">Toggle show</button><br>
  <transition name="bounce">
    <p v-if="show" style="display: inline-block;">Lorem ipsum</p>
  </transition>
</div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      show: true
    }
  }
}
</script>

<style scoped>

/* 指定进入的animation */
.bounce-enter-active {
  animation: bounce-in .5s;
}
/* 指定离开的animation */
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>
